<script setup lang="ts">

import DialogItem from "./DialogItem.vue";
import ChatListItem from "./ChatListItem.vue";
import {ChatItem, ChatListData, Result} from "common";
import {Ref, ref} from "vue";
import {getChatList, setCookie} from "../api";
import {useRootStore} from "../stores/root.ts";
import {storeToRefs} from "pinia";

// todo 这个长数据可以移动到mock文件里
const dialogList:Ref<ChatListData> = ref<ChatListData>([])
const rootStore = useRootStore()
const {userInfo,Cookie}=storeToRefs(rootStore)
const emit = defineEmits(["handleChat"])
const activeChatItem:Ref<ChatItem> = ref<any>({})
const loadChatList = async ()=>{
  setCookie(Cookie.value)
  const res = await getChatList()
  dialogList.value=res.data.data.map(item=>{
    return{
      name:item.targetName,
      avatar:item.avatar,
      friendId:item.targetId,
      targetType:item.targetType,
      lastMessage:item.lastMessage,
      id:item.id,
      unread:0
    } as ChatItem
  });
}

loadChatList()

const handleChat = (chatItem:ChatItem)=>{
  chatItem.unread=0;
  activeChatItem.value=chatItem;
  emit("handleChat",chatItem)
}

const handleMessage = (message:any)=>{

  let item = null
  console.log(message)
  if(message.group){
    item =  dialogList.value.find(item=>item.friendId===message.receiverId && item.targetType===1)
    if(item) {
      item.lastMessage = message.content
    }
    if(message.receiverId===activeChatItem.value?.friendId)return;
  }else{
    if(message.userId===userInfo.value?.userId){
      item = dialogList.value.find(item => item.friendId === message.receiverId && item.targetType === 0)
    }else {
      item = dialogList.value.find(item => item.friendId === message.userId && item.targetType === 0)
    }
    if(item) {
      item.lastMessage = message.content
    }
    if(message.userId===userInfo.value?.userId)return
    if(message.userId===activeChatItem.value?.friendId)return;
  }
  if(message.userId===userInfo.value?.userId)return;
  if(item){
    item.unread++;
  }
}

defineExpose({loadChatList,handleMessage})

</script>

<template>
  <div class="chat-list" data-tauri-drag-region>
    <div class="search-panel" data-tauri-drag-region>

      <v-autocomplete variant="filled" append-inner-icon="mdi-magnify" density="compact" hide-details single-line :items="dialogList"
                    style="margin-left: 5px;flex: 1" item-title="name" item-value="friendId" menu-icon="">
        <template v-slot:chip="{ props, item }">
          <v-chip
              v-bind="props"
              :prepend-avatar="item.raw.avatar"
              :text="item.raw.name"
          ></v-chip>
        </template>
        <template v-slot:item="{props,item}">
          <chat-list-item v-bind="props" :chat-info="item.raw" @click="handleChat(item.raw)"></chat-list-item>
        </template>
      </v-autocomplete>

      <v-icon icon="mdi-plus-box" class="add-member-btn"></v-icon>
    </div>
    <div class="dialog-list">
      <chat-list-item v-for="(item,index) in dialogList" :chat-info="item" @click="handleChat(item)"></chat-list-item>
    </div>
  </div>
</template>

<style scoped lang="scss">
.chat-list {
  user-select: none;
  height: 100%;
  width: 300px;
  border-right: solid 1px #ddd;
  display: flex;
  flex-direction: column;

  .search-panel {
    height: 60px;
    border-bottom: solid 1px #ddd;
    display: flex;
    align-items: center;

    .add-member-btn {
      margin: 0 5px;
      cursor: pointer;

      &:hover {
        color: #888888;
      }
    }
  }

  .dialog-list {
    background-color: #f3f3f3;
    flex: 1;
    overflow-y: auto;
  }


}


</style>
